<template>
    <div class="pack">
        <div class="tree_container">
            <h3>机构列表</h3>
            <div class="treePack">
                <Tree :data="organizationTreeData" @on-select-change="organizationTreeChange"></Tree>
            </div>
        </div>
        <div class="detail_container">
            <h3>大队值班管理</h3>
            <div class="hunttool" v-if="addduty">
                <Date-picker style="width:150px;float: left;margin-right: 6px;" size="small" type="datetime" placeholder="选择开始日期" v-model="searchBeginTime" @on-change="searchBeginTimeDate"></Date-picker>
                <Date-picker style="width:150px;float: left;margin-right: 6px;" size="small" type="datetime" placeholder="选择结束日期" v-model="searchEndTime" @on-change="searchEndTimeDate"></Date-picker>
                <Button type="primary" icon="ios-search" size="small" @click="searchData">查询</Button>
                <Button type="ghost" icon="ios-trash-outline" size="small" class="deltebtn" @click="batchDelete">批量删除</Button>
                <Button type="ghost" icon="ios-plus-empty" size="small" class="addbtn" @click="addnew">新增</Button>
            </div>
            <div class="compile" v-if="addduty">
                <Table stripe border :columns="columns" :data="tabledata" @on-selection-change="compileSelect"></Table>
            </div>
            <div class="page_container" v-if="addduty">
                <Page :current="pageNo" :total="totalCount" size="small" simple class="page_btn"
                      @on-change="pageChange"></Page>
                <P class="page_text">共{{totalCount}}条</P>
            </div>
            <!--新增修改-->
            <div class="hunttoolreturn" v-if="!addduty">
                <Button type="ghost" icon="arrow-left-c" size="small" class="addbtn" @click="returnBtn">返回</Button>
            </div>
            <div v-show="!addduty">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" style="margin-right: 20px">
                    <Card class="right-card" dis-hover>
                        <p slot="title">基本信息</p>
                        <Form-item label="所属单位" prop="departmentName">
                            <p >&nbsp;{{formValidate.departmentName}}</p>
                        </Form-item>
                        <Row>
                            <Col span="6">
                            <Form-item label="值班日期" prop="dutyTime">
                                <Date-picker type="datetime" placeholder="选择日期" v-model="formValidate.dutyTime"
                                             @on-change="dutyTimeDate"></Date-picker>
                            </Form-item>
                            </Col>
                            <Col span="6">
                            <Form-item label="风向" prop="windDirection">
                                <Select v-model="formValidate.windDirection" clearable >
                                    <Option v-for="item in windDirectionData" :value="item.value" :key="item.value" >{{item.value }}</Option>
                                </Select>
                            </Form-item>
                            </Col>
                            <Col span="6">
                            <Form-item label="风力" prop="windPower">
                                <Select v-model="formValidate.windPower" clearable  >
                                    <Option v-for="item in windPowerData" :value="item.value" :key="item.value" >{{item.value}}</Option>
                                </Select>
                            </Form-item>
                            </Col>
                            <Col span="6">
                            <Form-item label="战备等级" prop="combatReadLevel">
                                <Input v-model="formValidate.combatReadLevel" placeholder=""></Input>
                            </Form-item>
                            </Col>
                        </Row>
                    </Card>

                    <Card class="right-card" dis-hover>
                        <p slot="title">执勤实力</p>
                        <Row>
                            <Col span="6">
                            <Form-item label="执勤队长" prop="captain">
                                <Input v-model="formValidate.captain" placeholder="填写执勤队长"></Input>
                            </Form-item>
                            </Col>
                            <Col span="6">
                            <Form-item label="战斗班长" prop="combatantMonitor">
                                <Input v-model="formValidate.combatantMonitor" placeholder="填写战斗班长"></Input>
                            </Form-item>
                            </Col>
                            <Col span="6">
                            <Form-item label="电话员" prop="telephoneOpeartor">
                                <Input v-model="formValidate.telephoneOpeartor" placeholder="填写电话员"></Input>
                            </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="4">
                            <Form-item label="执勤人数总数" prop="perNum">
                                <Input-number :min="0" v-model="formValidate.perNum"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="驾驶员总数" prop="driverNum">
                                <Input-number :min="0" v-model="formValidate.driverNum"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="战斗员总数" prop="combatantNum">
                                <Input-number :min="0" v-model="formValidate.combatantNum"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="执勤车总数" prop="vehicleNum">
                                <Input-number :min="0" v-model="formValidate.vehicleNum"></Input-number>
                            </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="4">
                            <Form-item label="水罐消防车" prop="waterVechicle">
                                <Input-number :min="0" v-model="formValidate.waterVechicle"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="泡沫消防车" prop="foamVehicle">
                                <Input-number :min="0" v-model="formValidate.foamVehicle"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="高喷消防车" prop="highSprayVehicle">
                                <Input-number :min="0" v-model="formValidate.highSprayVehicle"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="干粉联用车" prop="dryPowderVehicle">
                                <Input-number :min="0" v-model="formValidate.dryPowderVehicle"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="特种消防车" prop="specialVehicle">
                                <Input-number :min="0" v-model="formValidate.specialVehicle"></Input-number>
                            </Form-item>
                            </Col>
                        </Row>
                        <Form-item label="备用车启动情况" prop="reserveCarSituation" style="padding-right: 110px">
                            <Input v-model="formValidate.reserveCarSituation" type="textarea"
                                   :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
                        </Form-item>
                        <Form-item label="人员请销假情况" prop="leaveSituation" style="padding-right: 110px">
                            <Input v-model="formValidate.leaveSituation" type="textarea"
                                   :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
                        </Form-item>
                    </Card>

                    <Card class="right-card" dis-hover>
                        <p slot="title">车载灭火剂总量（t）</p>
                        <Row>
                            <Col span="4">
                            <Form-item label="水" prop="water">
                                <Input-number :min="0" v-model="formValidate.water"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="干粉" prop="dryPowder">
                                <Input-number :min="0" v-model="formValidate.dryPowder"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="氟蛋白泡沫" prop="proteinFoam">
                                <Input-number :min="0" v-model="formValidate.proteinFoam"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="清水泡沫" prop="waterFoam">
                                <Input-number :min="0" v-model="formValidate.waterFoam"></Input-number>
                            </Form-item>
                            </Col>
                            <Col span="4">
                            <Form-item label="抗溶泡沫" prop="insolubleFoam">
                                <Input-number :min="0" v-model="formValidate.insolubleFoam"></Input-number>
                            </Form-item>
                            </Col>
                        </Row>
                    </Card>
                    <Card class="right-card" dis-hover>
                        <p slot="title">其他</p>
                        <Form-item label="通知、通告" prop="notice" style="padding-right: 110px">
                            <Input v-model="formValidate.notice" type="textarea" :autosize="{minRows: 4,maxRows: 8}"
                                   placeholder=""></Input>
                        </Form-item>
                        <Form-item label="工作记事" prop="workMemo" style="padding-right: 110px">
                            <Input v-model="formValidate.workMemo" type="textarea" :autosize="{minRows: 4,maxRows: 8}"
                                   placeholder=""></Input>
                        </Form-item>
                        <Form-item label="战备检查" prop="reaInspect" style="padding-right: 110px">
                            <Input v-model="formValidate.reaInspect" type="textarea" :autosize="{minRows: 4,maxRows: 8}"
                                   placeholder=""></Input>
                        </Form-item>
                        <Form-item label="灭火战斗" prop="fireFighting" style="padding-right: 110px">
                            <Input v-model="formValidate.fireFighting" type="textarea"
                                   :autosize="{minRows: 4,maxRows: 8}" placeholder=""></Input>
                        </Form-item>
                        <Form-item label="社会救援" prop="socialRescue" style="padding-right: 110px">
                            <Input v-model="formValidate.socialRescue" type="textarea"
                                   :autosize="{minRows: 4,maxRows: 8}" placeholder=""></Input>
                        </Form-item>
                        <Form-item label="现场监护" prop="fieldMonitoring" style="padding-right: 110px">
                            <Input v-model="formValidate.fieldMonitoring" type="textarea"
                                   :autosize="{minRows: 4,maxRows: 8}" placeholder=""></Input>
                        </Form-item>
                        <Form-item label="演习出动" prop="drillOut" style="padding-right: 110px">
                            <Input v-model="formValidate.drillOut" type="textarea" :autosize="{minRows: 4,maxRows: 8}"
                                   placeholder=""></Input>
                        </Form-item>
                    </Card>
                    <Row>
                        <Col span="6" offset="18">
                        <Form-item label="值班领导签字" prop="leaderSignature">
                            <Input v-model="formValidate.leaderSignature" placeholder=""></Input>
                        </Form-item>
                        </Col>
                    </Row>
                </Form>
                <div style="text-align: center">
                    <Button type="ghost" @click="returnBtn" style="margin-right: 100px">取消</Button>
                    <Button type="primary" @click="compileSubmit('formValidate')">提交</Button>
                </div>
            </div>
        </div>
        <!--新增执勤状况弹出框-->
        <Modal v-model="conditionModal" :title="compiletitle" :closable="false" :mask-closable="false" >
            <Form ref="conditionCompile" :model="conditionCompile" :rules="conditionValidate" :label-width="100"
                  style="margin-right: 20px">
                <Form-item label="执勤车编号" prop="dutyVehicleNum">
                    <Input v-model="conditionCompile.dutyVehicleNum" placeholder="请填写执勤车编号"></Input>
                </Form-item>
                <Form-item label="车组长" prop="vehicleCaptain">
                    <Input v-model="conditionCompile.vehicleCaptain" placeholder="请填写车组长"></Input>
                </Form-item>
                <Form-item label="驾驶员" prop="driver">
                    <Input v-model="conditionCompile.driver" placeholder="请填写驾驶员"></Input>
                </Form-item>
                <Form-item label="1号员" prop="oneNumber">
                    <Input v-model="conditionCompile.oneNumber" placeholder=""></Input>
                </Form-item>
                <Form-item label="3号员" prop="threeNumber">
                    <Input v-model="conditionCompile.threeNumber" placeholder=""></Input>
                </Form-item>
                <Form-item label="4号员" prop="fourNumber">
                    <Input v-model="conditionCompile.fourNumber" placeholder=""></Input>
                </Form-item>
                <Form-item label="5号员" prop="fiveNumber">
                    <Input v-model="conditionCompile.fiveNumber" placeholder=""></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="ghost" @click="conditionCancel()">取消</Button>
                <Button type="primary" @click="conditionSubmit('conditionCompile')">提交</Button>
            </div>
        </Modal>
        <!--查看执勤状况-->
        <Modal v-model="inspectionRecord" title="执勤状况" width="900" :closable="false" :mask-closable="false">
            <Table border :columns="columnRecord" :data="dataRecord"></Table>
            <div class="page_container">
                <Page :current="RecordPage.pageNo" :total="RecordPage.totalCount" size="small" simple class="page_btn"
                      @on-change="recordPageChange"></Page>
                <P class="page_text">查到{{RecordPage.totalCount}}条信息</P>
            </div>
            <div slot="footer">
                <Button type="primary" @click="recordCancel">关闭</Button>
            </div>
        </Modal>
        <!--查看值班详情-->
        <Modal v-model="inspectionDuty" title="值班详情" width="900" :closable="false" :mask-closable="false">
            <Form :model="formValidate" :label-width="100" style="margin-right: 20px">
            <Card class="right-card" dis-hover>
                <p slot="title">基本信息</p>
                <Form-item label="所属单位:" :label-width="80" prop="">
                    <p>{{formValidate.departmentName}}</p>
                </Form-item>
                <Row>
                    <Col span="6">
                    <Form-item label="值班日期:" :label-width="80" prop="">
                        <p>{{formValidate.dutyTime}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="风向:" prop="">
                        <p>{{formValidate.windDirection}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="风力:" prop="">
                        <p>{{formValidate.windPower}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="战备等级:" prop="">
                        <p>{{formValidate.combatReadLevel}}</p>
                    </Form-item>
                    </Col>
                </Row>
            </Card>
            <Card class="right-card" dis-hover>
                <p slot="title">执勤实力</p>
                <Row>
                    <Col span="6">
                    <Form-item label="执勤队长:" prop="">
                        <p>{{formValidate.captain}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="战斗班长:" prop="">
                        <p>{{formValidate.combatantMonitor}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="电话员:" prop="">
                        <p>{{formValidate.telephoneOpeartor}}</p>
                    </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="6">
                    <Form-item label="执勤人数总数:" prop="">
                        <p>{{formValidate.perNum}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="驾驶员总数:" prop="">
                        <p>{{formValidate.driverNum}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="战斗员总数:" prop="">
                        <p>{{formValidate.combatantNum}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="执勤车总数:" prop="">
                        <p>{{formValidate.vehicleNum}}</p>
                    </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="6">
                    <Form-item label="水罐消防车:" prop="">
                        <p>{{formValidate.waterVechicle}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="泡沫消防车:" prop="">
                        <p>{{formValidate.foamVehicle}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="高喷消防车:" prop="">
                        <p>{{formValidate.highSprayVehicle}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="干粉联用车:" prop="">
                        <p>{{formValidate.dryPowderVehicle}}</p>
                    </Form-item>
                    </Col>
                    <Col span="6">
                    <Form-item label="特种消防车:" prop="">
                        <p>{{formValidate.specialVehicle}}</p>
                    </Form-item>
                    </Col>
                </Row>
                <Form-item label="备用车启动情况:" prop="">
                    <Input v-model="formValidate.reserveCarSituation" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="人员请销假情况:" prop="">
                    <Input v-model="formValidate.leaveSituation" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
            </Card>
            <Card class="right-card" dis-hover>
                <p slot="title">车载灭火剂总量（t）</p>
                <Row>
                    <Col span="5">
                    <Form-item label="水:" prop="">
                        <p>{{formValidate.water}}</p>
                    </Form-item>
                    </Col>
                    <Col span="5">
                    <Form-item label="干粉:" prop="">
                        <p>{{formValidate.dryPowder}}</p>
                    </Form-item>
                    </Col>
                    <Col span="5">
                    <Form-item label="氟蛋白泡沫:" prop="">
                        <p>{{formValidate.proteinFoam}}</p>
                    </Form-item>
                    </Col>
                    <Col span="5">
                    <Form-item label="清水泡沫:" prop="">
                        <p>{{formValidate.waterFoam}}</p>
                    </Form-item>
                    </Col>
                    <Col span="4">
                    <Form-item label="抗溶泡沫:" prop="">
                        <p>{{formValidate.insolubleFoam}}</p>
                    </Form-item>
                    </Col>
                </Row>
            </Card>
            <Card class="right-card" dis-hover>
                <p slot="title">执勤状况</p>
            <Table border :columns="columnDuty" :data="dataRecord"></Table>
            <div class="page_container">
                <Page :current="RecordPage.pageNo" :total="RecordPage.totalCount" size="small" simple class="page_btn" @on-change="recordPageChange"></Page>
                <P class="page_text">查到{{RecordPage.totalCount}}条信息</P>
            </div>
            </Card>
            <Card class="right-card" dis-hover>
                <p slot="title">其他</p>
                <Form-item label="通知、通告:" prop="">
                    <Input v-model="formValidate.notice" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="工作记事:" prop="">
                    <Input v-model="formValidate.workMemo" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="战备检查:" prop="">
                    <Input v-model="formValidate.reaInspect" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="灭火战斗:" prop="">
                    <Input v-model="formValidate.fireFighting" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="社会救援:" prop="">
                    <Input v-model="formValidate.socialRescue" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="现场监护:" prop="">
                    <Input v-model="formValidate.fieldMonitoring" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
                <Form-item label="演习出动:" prop="">
                    <Input v-model="formValidate.drillOut" readonly type="textarea" :autosize="{minRows: 2,maxRows: 8}" placeholder=""></Input>
                </Form-item>
            </Card>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="recordCancel">关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            const validateDutyTime = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择日期'));
                } else {
                    callback();
                }
            };
            return {
                departmentCode:CURRENT_LEADER.departmentCode,  //登录人员code值
                valueLen:'', //点击树获得值的长度
                //风向下拉
                windDirectionData:'',
                //风下拉
                windPowerData:'',
                //机构树
                organizationTreeData:[],
                //新增值班显示
                addduty: true,
                compiletitle: "添加执勤状况",
                conditionModal: false,
                //记录批量删除id
                compiledele: "",
                //当前页
                pageNo: 1,
                //总共多少页
                totalPage: '',
                //表格总共记录数
                totalCount: 0,
                //执勤状况弹窗
                inspectionRecord: false,
                //值班详情弹窗
                inspectionDuty: false,
                //搜索机构名称
                organizationName: '',
                //搜索开始时间
                searchBeginTime:'',
                //搜索结束时间
                searchEndTime:'',
                //下拉列表
                model1: "all",
                cityList: [
                    {
                        value: 'all',
                        label: '全部'
                    },
                ],
                //表格头部信息
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '所属单位',
                        key: 'departmentName',
                    },
                    {
                        title: '值班日期',
                        key: 'dutyTime',
//                        render: function (h, params) {
//                            var newTime = new Date(params.row.dutyTime);
//                            var Y = newTime.getFullYear();
//                            var M = newTime.getMonth() + 1;
//                            var D = newTime.getDate();
//                            var H = newTime.getHours();
//                            var m = newTime.getMinutes();
//                            var s = newTime.getSeconds();
//                            var time = Y + "-" + M + "-" + D + " " + H + ":" + m + ":" + s;
//                            return h('div', time);
//                        }
                    },
                    {
                        title: '执勤队长',
                        key: 'captain'
                    },
                    {
                        title: '执勤状况',
                        key: 'addsituation',
                        align: 'center',
                        width: 220,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.conditionModal = true;
                                            this.conditionCompile.groupDutyId = params.row.id;
                                        }
                                    }
                                }, '添加'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.RecordPage.groupDutyId = params.row.id;
                                            this.groupDutyStatusFlipList();
                                            this.inspectionShow();
                                        }
                                    }
                                }, '查看'),
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.examineDuty(params.row);
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.amend(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.groupDutyRemoveByIds(params.row.id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //表格数据
                tabledata: [],
                //新增表单
                formValidate: {
                    id: '',
                    departmentCode: '',
                    departmentCodeCopy: '',
                    departmentName:'',
                    departmentNameCopy:'',
                    dutyTime: '',
                    windDirection: '',
                    windPower: '',
                    combatReadLevel: '',
                    captain: '',
                    perNum: 0,
                    driverNum: 0,
                    combatantNum: 0,
                    combatantMonitor: '',
                    telephoneOpeartor: '',
                    leaveSituation: '',
                    vehicleNum: 0,
                    waterVechicle: 0,
                    foamVehicle: 0,
                    highSprayVehicle: 0,
                    dryPowderVehicle: 0,
                    specialVehicle: 0,
                    reserveCarSituation: '',
                    water: 0,
                    dryPowder: 0,
                    proteinFoam: 0,
                    waterFoam: 0,
                    insolubleFoam: 0,
                    notice: '',
                    workMemo: '',
                    reaInspect: '',
                    fireFighting: '',
                    socialRescue: '',
                    fieldMonitoring: '',
                    drillOut: '',
                    leaderSignature: '',
                },
                //表单验证
                ruleValidate: {
                    departmentName:[
                        {required: true, message: '请在左侧选择所属单位', trigger: 'change'}
                    ],
                    dutyTime: [
                        {required: true, validator: validateDutyTime, trigger: 'change'}
                    ],
                    windDirection: [
                        {required: true, message: '请填写风向', trigger: 'change'}
                    ],
                    windPower: [
                        {required: true, message: '请填写风力', trigger: 'change'}
                    ],
                    combatReadLevel: [
                        {required: true, whitespace: true, message: '请填写战备等级', trigger: 'blur'}
                    ],
                    captain: [
                        {required: true, whitespace: true, message: '请填写执勤队长', trigger: 'blur'}
                    ],
                    vehicleNum: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    perNum: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    waterVechicle: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    driverNum: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    foamVehicle: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    highSprayVehicle: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    dryPowderVehicle: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    specialVehicle: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    combatantNum: [
                        {type: 'integer', message: '数值不正确', trigger: 'change'}
                    ],
                    reserveCarSituation: [
                        { type: 'string', max: 200, message: '内容过长，最多200字', trigger: 'blur' }
                    ],
                    leaveSituation: [
                        { type: 'string', max: 200, message: '内容过长，最多200字', trigger: 'blur' }
                    ],
                    notice: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                    workMemo: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                    reaInspect: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                    fireFighting: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                    socialRescue: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                    fieldMonitoring: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                    drillOut: [
                        { type: 'string', max: 500, message: '内容过长，最多500字', trigger: 'blur' }
                    ],
                },
                //新增执勤状况表单
                conditionCompile: {
                    groupDutyId: '',
                    dutyVehicleNum: '',
                    vehicleCaptain: '',
                    driver: '',
                    oneNumber: '',
                    threeNumber: '',
                    fourNumber: '',
                    fiveNumber: '',
                },
                //新增执勤状况表单验证
                conditionValidate: {
                    dutyVehicleNum: [
                        {required: true, message: '请填写执勤车编号', trigger: 'blur'}
                    ],
                    vehicleCaptain: [
                        {required: true, message: '请填写车组长', trigger: 'blur'}
                    ],
                    driver: [
                        {required: true, message: '请填写驾驶员', trigger: 'blur'}
                    ],
                },
                //查看执勤状况弹窗表头
                columnRecord: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '执勤车编号',
                        key: 'dutyVehicleNum',
                        align: 'center'
                    },
                    {
                        title: '车组长',
                        key: 'vehicleCaptain',
                        align: 'center'
                    },
                    {
                        title: '驾驶员',
                        key: 'driver',
                        align: 'center'
                    },
                    {
                        title: '1号员',
                        key: 'oneNumber',
                        align: 'center'
                    },
                    {
                        title: '3号员',
                        key: 'threeNumber',
                        align: 'center'
                    },
                    {
                        title: '4号员',
                        key: 'fourNumber',
                        align: 'center'
                    },
                    {
                        title: '5号员',
                        key: 'fiveNumber',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.groupDutyStatusRemoveByIds(params.row.id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //查看值班详细
                columnDuty: [
                {
                    type: 'index',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '执勤车编号',
                    key: 'dutyVehicleNum',
                    align: 'center'
                },
                {
                    title: '车组长',
                    key: 'vehicleCaptain',
                    align: 'center'
                },
                {
                    title: '驾驶员',
                    key: 'driver',
                    align: 'center'
                },
                {
                    title: '1号员',
                    key: 'oneNumber',
                    align: 'center'
                },
                {
                    title: '3号员',
                    key: 'threeNumber',
                    align: 'center'
                },
                {
                    title: '4号员',
                    key: 'fourNumber',
                    align: 'center'
                },
                {
                    title: '5号员',
                    key: 'fiveNumber',
                    align: 'center'
                },
                ],
                //查看执勤状况弹窗表数据
                dataRecord: [],
                //查看执勤状况表格分页
                RecordPage: {
                    groupDutyId: '',
                    pageNo: 1,
                    totalCount: 0,
                    totalPage: 0,
                }
            }
        },
        computed: {},
        created() {
            this.groupDutyFlipList();
            this.organizationFlipList();
            this.dictionary_flipList_windDirection();
            this.dictionary_flipList_windPower();
        },
        methods: {
            searchBeginTimeDate(date){
                this.searchBeginTime = date;
            },
            searchEndTimeDate(date){
                this.searchEndTime = date;
            },
            dutyTimeDate(date) {
                this.formValidate.dutyTime = date;
            },
            //日期格式转换
            dateformatting(dateval) {
                var newTime = new Date(dateval);
                var yyyy = newTime.getFullYear();
                var MM = newTime.getMonth() + 1;
                var dd = newTime.getDate();
                var hh = newTime.getHours();
                var mm = newTime.getMinutes();
                var ss = newTime.getSeconds();
                var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
//                var time = yyyy + "-" + MM + "-" + dd;
                return time
            },
            //机构树点击事件
            organizationTreeChange(val){
                this.valueLen = val.length;
                if(this.addduty){
                    if(val.length>0 && this.departmentCode<=val[0].code){
                        this.formValidate.departmentName = val[0].fullTitle;
                        this.formValidate.departmentNameCopy = val[0].fullTitle;
                        this.formValidate.departmentCode = val[0].code;
                        this.formValidate.departmentCodeCopy = val[0].code;
                        this.searchData();
                    }else {
                        this.formValidate.departmentCode='';
                        this.formValidate.departmentCodeCopy = '';
                        this.formValidate.departmentName='';
                        this.formValidate.departmentNameCopy ='';
                        this.searchData();
                    }
                }else if(val.length>0 ){
                    if(this.departmentCode<=val[0].code){
                        this.formValidate.departmentName=val[0].fullTitle;
                        this.formValidate.departmentNameCopy = val[0].fullTitle;
                        this.formValidate.departmentCode=val[0].code;
                        this.formValidate.departmentCodeCopy = val[0].code;
                    }else {
                        this.formValidate.departmentCode='';
                        this.formValidate.departmentCodeCopy = '';
                        this.formValidate.departmentName='';
                        this.formValidate.departmentNameCopy = '';
                        this.$Message.error('权限不够，无法新增，请联系管理员！');
                    }
                }else {
                    this.formValidate.departmentCode='';
                    this.formValidate.departmentCodeCopy = '';
                    this.formValidate.departmentName='';
                    this.formValidate.departmentNameCopy ='';
                }
            },
            //搜索
            searchData(){
                this.pageNo=1;
                this.groupDutyFlipList();
            },
            //新增
            addnew() {
                this.formValidate.departmentName =  this.formValidate.departmentNameCopy;
                this.formValidate.departmentCode=this.formValidate.departmentCodeCopy;
                this.addduty = false;
                this.formValidate.id = "";
//                this.compile = true;
            },
            //返回
            returnBtn() {
/*                if( this.formValidate.id !==""){
                    this.compileReset('formValidate');
                    this.organizationFlipList();
                }*/
                this.formValidate.departmentNameCopy = '';
                this.formValidate.departmentCode = '';
                this.compileReset('formValidate');
                this.groupDutyFlipList();
                this.organizationFlipList();
                this.addduty = true;
            },
            //查看值班详情
            examineDuty(val) {
                this.formValidate.departmentCode = val.departmentCode;
                this.formValidate.departmentName = val.departmentName;
                this.formValidate.dutyTime = val.dutyTime;
                this.formValidate.windDirection = val.windDirection;
                this.formValidate.windPower = val.windPower;
                this.formValidate.combatReadLevel = val.combatReadLevel;
                this.formValidate.captain = val.captain;
                this.formValidate.perNum = val.perNum;
                this.formValidate.driverNum = val.driverNum;
                this.formValidate.combatantNum = val.combatantNum;
                this.formValidate.combatantMonitor = val.combatantMonitor;
                this.formValidate.telephoneOpeartor = val.telephoneOpeartor;
                this.formValidate.leaveSituation = val.leaveSituation;
                this.formValidate.vehicleNum = val.vehicleNum;
                this.formValidate.waterVechicle = val.waterVechicle;
                this.formValidate.foamVehicle = val.foamVehicle;
                this.formValidate.highSprayVehicle = val.highSprayVehicle;
                this.formValidate.dryPowderVehicle = val.dryPowderVehicle;
                this.formValidate.specialVehicle = val.specialVehicle;
                this.formValidate.reserveCarSituation = val.reserveCarSituation;
                this.formValidate.water = val.water;
                this.formValidate.dryPowder = val.dryPowder;
                this.formValidate.proteinFoam = val.proteinFoam;
                this.formValidate.waterFoam = val.waterFoam;
                this.formValidate.insolubleFoam = val.insolubleFoam;
                this.formValidate.notice = val.notice;
                this.formValidate.workMemo = val.workMemo;
                this.formValidate.reaInspect = val.reaInspect;
                this.formValidate.fireFighting = val.fireFighting;
                this.formValidate.socialRescue = val.socialRescue;
                this.formValidate.fieldMonitoring = val.fieldMonitoring;
                this.formValidate.drillOut = val.drillOut;
                this.formValidate.leaderSignature = val.leaderSignature;
                this.RecordPage.groupDutyId = val.id;
                this.RecordPage.pageNo=1;
                this.groupDutyStatusFlipList();
                this.inspectionDuty = true;
            },
            //修改
            amend(val) {
                this.formValidate.id = val.id;
                this.formValidate.departmentCode = val.departmentCode;
                this.formValidate.departmentName = val.departmentName;
                this.formValidate.dutyTime = val.dutyTime;
                this.formValidate.windDirection = val.windDirection;
                this.formValidate.windPower = val.windPower;
                this.formValidate.combatReadLevel = val.combatReadLevel;
                this.formValidate.captain = val.captain;
                this.formValidate.perNum = val.perNum;
                this.formValidate.driverNum = val.driverNum;
                this.formValidate.combatantNum = val.combatantNum;
                this.formValidate.combatantMonitor = val.combatantMonitor;
                this.formValidate.telephoneOpeartor = val.telephoneOpeartor;
                this.formValidate.leaveSituation = val.leaveSituation;
                this.formValidate.vehicleNum = val.vehicleNum;
                this.formValidate.waterVechicle = val.waterVechicle;
                this.formValidate.foamVehicle = val.foamVehicle;
                this.formValidate.highSprayVehicle = val.highSprayVehicle;
                this.formValidate.dryPowderVehicle = val.dryPowderVehicle;
                this.formValidate.specialVehicle = val.specialVehicle;
                this.formValidate.reserveCarSituation = val.reserveCarSituation;
                this.formValidate.water = val.water;
                this.formValidate.dryPowder = val.dryPowder;
                this.formValidate.proteinFoam = val.proteinFoam;
                this.formValidate.waterFoam = val.waterFoam;
                this.formValidate.insolubleFoam = val.insolubleFoam;
                this.formValidate.notice = val.notice;
                this.formValidate.workMemo = val.workMemo;
                this.formValidate.reaInspect = val.reaInspect;
                this.formValidate.fireFighting = val.fireFighting;
                this.formValidate.socialRescue = val.socialRescue;
                this.formValidate.fieldMonitoring = val.fieldMonitoring;
                this.formValidate.drillOut = val.drillOut;
                this.formValidate.leaderSignature = val.leaderSignature;
                this.addduty = false;
            },
            //新增,修改大队值班提交
            compileSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        ezjsUtil.request(apiConstants.groupDuty_edit,
                            {
                                id: _this.formValidate.id,
                                departmentCode: _this.formValidate.departmentCode,
                                departmentName: _this.formValidate.departmentName,
                                dutyTime: _this.formValidate.dutyTime,
                                windDirection: _this.formValidate.windDirection,
                                windPower: _this.formValidate.windPower,
                                combatReadLevel: _this.formValidate.combatReadLevel,
                                captain: _this.formValidate.captain,
                                perNum: _this.formValidate.perNum,
                                driverNum: _this.formValidate.driverNum,
                                combatantNum: _this.formValidate.combatantNum,
                                combatantMonitor: _this.formValidate.combatantMonitor,
                                telephoneOpeartor: _this.formValidate.telephoneOpeartor,
                                leaveSituation: _this.formValidate.leaveSituation,
                                vehicleNum: _this.formValidate.vehicleNum,
                                waterVechicle: _this.formValidate.waterVechicle,
                                foamVehicle: _this.formValidate.foamVehicle,
                                highSprayVehicle: _this.formValidate.highSprayVehicle,
                                dryPowderVehicle: _this.formValidate.dryPowderVehicle,
                                specialVehicle: _this.formValidate.specialVehicle,
                                reserveCarSituation: _this.formValidate.reserveCarSituation,
                                water: _this.formValidate.water,
                                dryPowder: _this.formValidate.dryPowder,
                                proteinFoam: _this.formValidate.proteinFoam,
                                waterFoam: _this.formValidate.waterFoam,
                                insolubleFoam: _this.formValidate.insolubleFoam,
                                notice: _this.formValidate.notice,
                                workMemo: _this.formValidate.workMemo,
                                reaInspect: _this.formValidate.reaInspect,
                                fireFighting: _this.formValidate.fireFighting,
                                socialRescue: _this.formValidate.socialRescue,
                                fieldMonitoring: _this.formValidate.fieldMonitoring,
                                drillOut: _this.formValidate.drillOut,
                                leaderSignature: _this.formValidate.leaderSignature,
                            },
                            function (err, data) {
                                if (err) {
                                    return;
                                }
                                _this.formValidate.departmentName = '';
                                _this.formValidate.departmentCode= '';
                                _this.formValidate.departmentNameCopy = '';
                                _this.formValidate.departmentCodeCopy= '';
                                _this.pageNo = 1;
                                _this.groupDutyFlipList();
                                _this.organizationFlipList();
                            }
                        )
                        _this.$Message.success('提交成功!');
                        _this.addduty = true;
                        _this.compileReset('formValidate');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            //表单重置
            compileReset(name) {
                this.$refs[name].resetFields();
            },
            //表格勾选
            compileSelect(selection, row) {
                var ids=[];
                for (var i=0;i<selection.length;i++){
                    ids.push(selection[i].id);
                }
                this.compiledele=ids.join(',');
            },
            //批量删除
            batchDelete() {
                if(this.compiledele) {
                    this.groupDutyRemoveByIds(this.compiledele);
                }else {
                    this.$Message.error('请选择删除项!');
                }
            },
/*            //表单取消
            compileCancel() {
                this.compile = false;
                this.compileReset('formValidate');
            },*/
            //新增执勤状况提交
            conditionSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        ezjsUtil.request(apiConstants.groupDutyStatus_edit,
                            {
                                groupDutyId: _this.conditionCompile.groupDutyId,
                                dutyVehicleNum: _this.conditionCompile.dutyVehicleNum,
                                vehicleCaptain: _this.conditionCompile.vehicleCaptain,
                                driver: _this.conditionCompile.driver,
                                oneNumber: _this.conditionCompile.oneNumber,
                                threeNumber: _this.conditionCompile.threeNumber,
                                fourNumber: _this.conditionCompile.fourNumber,
                                fiveNumber: _this.conditionCompile.fiveNumber,
                            },
                            function (err, data) {
                                if (err) {
                                    return;
                                }
                            }
                        )
                        _this.$Message.success('提交成功!');
                        _this.conditionModal = false;
                        _this.compileReset('conditionCompile');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            //新增执勤状况，添加检验窗口取消
            conditionCancel() {
                this.conditionModal = false;
                this.compileReset('conditionCompile');
            },
            //检验记录窗口显示
            inspectionShow() {
                this.inspectionRecord = true;
            },
            //执勤状况，值班详情窗口关闭
            recordCancel() {
                this.inspectionRecord = false;
                this.inspectionDuty = false;
                this.compileReset('formValidate');
                this.RecordPage.pageNo=1;
                this.formValidate.departmentCode='';
            },
            //分页改变时
            pageChange(val) {
                if (val <= this.totalPage) {
                    this.pageNo = val;
                    this.groupDutyFlipList();
                }
            },
            //查看检验记录表格分页
            recordPageChange(val) {
                if (val <= this.RecordPage.totalPage) {
                    this.RecordPage.pageNo = val;
                    this.groupDutyStatusFlipList();
                }
            },
            //查询大队值班列表
            groupDutyFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.groupDuty_flipList,
                    {
                        departmentCode:_this.formValidate.departmentCode,
                        beginTime:_this.searchBeginTime,
                        endTime:_this.searchEndTime,
                        pageNo: _this.pageNo
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.tabledata = data.listInfo;
                        _this.totalCount = data.flipInfo.totalCount;
                        _this.totalPage = data.flipInfo.totalPage;
                    }
                )
            },
            //删除大队值班列表
            groupDutyRemoveByIds(delid) {
                var _this = this;
                ezjsUtil.request(apiConstants.groupDuty_removeByIds,
                    {
                        ids: delid
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.compiledele='';
                        _this.groupDutyFlipList();
                    }
                )
            },
            //查看执勤状况
            groupDutyStatusFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.groupDutyStatus_flipList,
                    {
                        groupDutyId: _this.RecordPage.groupDutyId,
                        pageNo: _this.RecordPage.pageNo
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.dataRecord = data.listInfo;
                        _this.RecordPage.totalCount = data.flipInfo.totalCount;
                        _this.RecordPage.totalPage = data.flipInfo.totalPage;

                    }
                )
            },
            //删除执勤状况
            groupDutyStatusRemoveByIds(delid) {
                var _this = this;
                ezjsUtil.request(apiConstants.groupDutyStatus_removeByIds,
                    {
                        ids: delid
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.groupDutyStatusFlipList();
                    }
                )
            },

            //获取所有组织机构树
            organizationFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    { },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.organizationTreeData=data;
                        _this.organizationTreeData[0].expand=true;
                    }
                )
            },

            /*字典数据相关接口*/
            dictionary_flipList_windDirection() { //查询风向
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: "windDirection",
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.windDirectionData = data;
                    }
                )
            },
            dictionary_flipList_windPower() { //查询风力
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: "windPower",
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.windPowerData = data;
                    }
                )
            },
        },
        mounted() {
        }
    }
</script>
<style lang="less" scoped>
    .pack {
        width: 100%;
        height: 100%;
    }

    .tree_container {
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;

    h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }
    .treePack{
        height: 94%;
        padding: 10px;
        overflow: auto;
    }
    }
    .detail_container {
        height: 100%;
        margin-left: 280px;
        overflow: hidden;
        overflow-y: auto;
    }

    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }

    .hunttool, .hunttoolreturn {
        height: 54px;
        padding: 15px 0;

    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }

    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }

    .right-card {
        margin-bottom: 20px;
    }
</style>